<template>
    <van-cell class="comment-item">
        <van-image slot="icon" class="avatar" round fit="cover" :src="comment.aut_photo" />
        <div slot="title" class="title-wrap">
            <div class="user-name">{{  comment.aut_name  }}</div>
            <van-button class="like-btn" :icon="comment.is_liking ? 'good-job' : 'good-job-o'"
                :class="{ liked: comment.is_liking }" @click="onComment">
                {{  comment.like_count > 0 ? comment.like_count : '赞'  }}
            </van-button>
        </div>

        <div slot="label">
            <p class="comment-content">{{  comment.content  }}</p>
            <div class="bottom-info">
                <span class="comment-pubdate">{{  comment.pubdate | relativeTime  }}</span>
                <van-button class="reply-btn" round @click="$emit('replyClick', comment)">回复 {{  comment.reply_count  }}
                </van-button>
            </div>
        </div>
    </van-cell>
</template>
  
<script>
import { addCommentLike, deleteCommentLike } from '../../../api/comment'

export default {
    name: 'CommentItem',
    components: {},
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    data() {
        return {}
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        async onComment() {
            try {
                if (this.comment.is_liking) {
                    deleteCommentLike(this.comment.com_id)
                    this.comment.like_count--
                } else {
                    addCommentLike(this.comment.com_id)
                    this.comment.like_count++
                }
                this.comment.is_liking = !this.comment.is_liking
            } catch (err) {
                console.log('点赞失败', err);
            }
        }
    }
}
</script>
  
  <style scoped lang="less">
  .comment-item {
      .avatar {
          width: 72px;
          height: 72px;
          margin-right: 25px;
      }
  
      .title-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .user-name {
              color: #406599;
              font-size: 26px;
          }
      }
  
      .comment-content {
          font-size: 32px;
          color: #222222;
          word-break: break-all;
          text-align: justify;
      }
  
      .comment-pubdate {
          font-size: 19px;
          color: #222;
          margin-right: 25px;
      }
  
      .bottom-info {
          display: flex;
          align-items: center;
      }
  
      .reply-btn {
          //   width: 135px;
          min-width: 135px;
          height: 48px;
          line-height: 48px;
          font-size: 21px;
          color: #222;
      }
  
      .like-btn {
          height: 30px;
          padding: 0;
          border: none;
          font-size: 19px;
          line-height: 30px;
          margin-right: 7px;
  
          &.liked {
              color: #e5645f;
          }
  
          .van-icon {
              font-size: 30px;
          }
      }
  }
  </style>